import React from 'react'
import { Badge,Icon } from 'antd-mobile'

import { BASEURL } from '../../api'
import './index.scss'

export default function HouseList(props) {
  const {list,history,showActionSheet}=props

  const tagStyle={
    marginRight:'5px',
    backgroundColor:'#21b68a',
    font:'12px 楷体',
    display:'flex',
    justifyContent:'center',
    alignItems:'center'
  }

  return (
    <div>
      {
        list?
        list.map(i=>{
          return <div key={i.houseCode} className='find-list-item' onClick={()=>showActionSheet?showActionSheet({path:'/detail',state:{title:i.title,id:i.houseCode}}):history?history.push('/detail',{title:i.title,id:i.houseCode}):null}>
            <img src={BASEURL+(Array.isArray(i.houseImg)?i.houseImg[0]:i.houseImg)} alt="" />
            <div className='info'>
              <span className='title'>{i.title}</span>
              {
                i.desc?<span className='desc'>{i.desc}</span>:null
              }
              <span className='tags'>{i.tags.map(t=><Badge className='tag' key={t} text={t} style={tagStyle}/>)}</span>
              <span className='price'>{i.price}<span>元/月</span></span>
            </div>
          </div>
        }):
        <div className='house-list-loading'>
          <span><Icon type='loading'></Icon>正在加载...</span>
        </div>
        
      }
    </div>
  )
}
